<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .App {
            width: 600px;
            height: 400px;
            background-color: aqua;
        }

        .Child {
            width: 600px;
            height: 400px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div id="root">

    </div>
</body>
<script src="../react.js"></script>
<script src="../react-dom.js"></script>
<!-- 用来将jsx语法转化为js语法 -->
<script src="../babel.min.js"></script>
<!-- 
子传父：
    在父组件的子组件标签上 绑定一个自定义属性 （自定义属性必须为函数类型）（函数组件是无状态组件）

    在子组件中使用this.props调用自定义属性函数 并 传值

 -->
<script type="text/babel">
    class App extends React.Component {
        state = {
            num: 9090
        }
        // 自定义属性（函数）  更新状态
        getNum = (num) => {
            this.setState({ num: num })
        }
        render() {
            return (
                <div className='App'>
                    父组件---{this.state.num}

                    <Child OngetNum={this.getNum}/>
                </div>
            )
        }
    }

    class Child extends React.Component {
        state = {
            num: 8000
        }
        render() {
            return (
                <div className='Child'>
                    子组件---{this.state.num}
                    <button onClick={()=>{
                        this.props.OngetNum(this.state.num)
                    }}>传值</button>
                </div>
            )
        }
    }
    ReactDOM.render(<App />, document.getElementById('root'))
</script>

</html>